import React, { useContext } from 'react';
import styled, { ThemeContext } from 'styled-components';
import Label from '../../../components/Label';
import { TokenStat } from '../../../basis-cash/types';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import TokenSymbol from '../../../components/TokenSymbol';
import { commify } from 'ethers/lib/utils';
import config from '../../../config';
import LaunchCountdown from '../../../components/Dial';
import shangsuo from '../../../assets/image/img_shangsuo@2x.png';

interface HomeCardProps {
  title: string;
  baseNum?: number;
  symbol: string;
  color: string;
  supplyLabel?: string;
  address: string;
  stat?: TokenStat;
}

const HomeCard: React.FC<HomeCardProps> = ({
  title,
  baseNum,
  symbol,
  color,
  address,
  supplyLabel = 'Total Supply',
  stat,
}) => {
  const tokenUrl = `${config.etherscanUrl}/address/${address}`;
  const sFundUrl = `${config.etherscanUrl}/address/${config.externalTokens.Fund[0]}`;
  const StyledCardSuperAccent = styled.div`
  background: linear-gradient(180deg, #23233F, ${color});
  margin-top: 25px;
  border-radius: 0px 0px 20px 20px;
  padding: 20px 20px;
`

  const StyledCardSuperAccent1 = styled.div`
  margin-top: 2px;
  border-radius: 0px 0px 20px 20px;
  padding: 10px 0px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`
  return (
    <Wrapper>

      <StyledCards>
        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: '15px' }}>
          <TokenSymbol symbol={symbol} />
          <CardHeader>{title}</CardHeader>
        </div>


        {title == 'sCASH' || title == 'SHARE' || (title == 'sHT' && baseNum >= 21000) || (title == 'sNEO' && baseNum >= 210000) || (title == 'sETH' && baseNum >= 2100000)|| (title == 'sBTC' && baseNum >= 21000000) ? (
          <StyledCardSuperAccent>
            <CardSection>
              {stat ? (
                <StyledValue>{(stat.priceInDAI !== '-' ? '$' : '') + stat.priceInDAI}</StyledValue>
              ) : (
                  <ValueSkeleton />
                )}
              <Label text="Current Price" color={'#23223E'} />
            </CardSection>

            <CardSection>
              {stat ? <StyledValue>{commify(stat.totalSupply)}</StyledValue> : <ValueSkeleton />}
              <StyledSupplyLabel href={tokenUrl} target="_blank" color={'#23223E'}>
                {supplyLabel}
              </StyledSupplyLabel>
            </CardSection>
          </StyledCardSuperAccent>
        ) : (
            <></>
          )}


      {title == 'sFUND' ? (
          <StyledCardSuperAccent>
          <CardSection>
            {stat ? (
              <StyledValue>{ stat.priceInDAI}</StyledValue>
            ) : (
                <ValueSkeleton />
              )}
            <StyledSupplyLabel href={sFundUrl} target="_blank" color={'#23223E'}>
              USDT Amount
            </StyledSupplyLabel>
          </CardSection>

          <CardSection>
            {stat ? <StyledValue>{commify(stat.totalSupply)}</StyledValue> : <ValueSkeleton />}
            <StyledSupplyLabel href={sFundUrl} target="_blank" color={'#23223E'}>
              sCash Amount
            </StyledSupplyLabel>
          </CardSection>
        </StyledCardSuperAccent>
        ) : (
          <></>
          )}


        {title == 'sHT' && baseNum < 21000 ? (
          <StyledCardSuperAccent1>
            <LaunchCountdown
              size={120}
              value={baseNum/21000*100}
            >
              <img
                src={shangsuo}
                alt={`LOCK`}
                width={51}
              />

            </LaunchCountdown>
            <Totalp>Total 21,000 sCASH to Unlock</Totalp>
            <Totalbutton>BUY sCASH to Unlock</Totalbutton>
          </StyledCardSuperAccent1>
        ) : (
          <></>
          )}


        {title == 'sNEO' && baseNum < 210000 ? (
          <StyledCardSuperAccent1>
            <LaunchCountdown
              size={120}
              value={baseNum?baseNum/210000*100:0}
            >
              <img
                src={shangsuo}
                alt={`LOCK`}
                width={51}
              />

            </LaunchCountdown>
            <Totalp>Total 210,000 sCASH to Unlock</Totalp>
            <Totalbutton>BUY sCASH to Unlock</Totalbutton>
          </StyledCardSuperAccent1>
        ) : (
          <></>
          )}

        {title == 'sETH' &&  baseNum < 2100000 ? (
          <StyledCardSuperAccent1>
            <LaunchCountdown
              size={120}
              value={baseNum?baseNum/2100000*100:0}
            >
              <img
                src={shangsuo}
                alt={`LOCK`}
                width={51}
              />

            </LaunchCountdown>
            <Totalp>Total 2,100,000 sCASH to Unlock</Totalp>
            <Totalbutton>BUY sCASH to Unlock</Totalbutton>
          </StyledCardSuperAccent1>
        ) : (
          <></>
          )}



        {title == 'sBTC' && baseNum < 21000000 ? (
          <StyledCardSuperAccent1>
            <LaunchCountdown
              size={120}
              value={baseNum?baseNum/21000000*100:0}
            >
              <img
                src={shangsuo}
                alt={`LOCK`}
                width={51}
              />

            </LaunchCountdown>
            <Totalp>Total 21,000,000 sCASH to Unlock</Totalp>
            <Totalbutton>BUY sCASH to Unlock</Totalbutton>
          </StyledCardSuperAccent1>
        ) : (
          <></>
          )}

        {/* 左后两个 */}
        {title == 'sDOT' ? (
          <StyledCardSuperAccent1>
            <LaunchCountdown
              size={120}
              value={0}
            >
              <img
                src={shangsuo}
                alt={`LOCK`}
                width={51}
              />

            </LaunchCountdown>
            <Totalp>Total 1M$ HDOT/sCASH LP to Unlock</Totalp>
            <Totalbutton>Stake LP to Unlock</Totalbutton>
          </StyledCardSuperAccent1>
        ) : (
            <></>
          )}


        {title == 'sFIL' ? (
          <StyledCardSuperAccent1>
            <LaunchCountdown
              size={120}
              value={0}
            >
              <img
                src={shangsuo}
                alt={`LOCK`}
                width={51}
              />

            </LaunchCountdown>
            <Totalp>Total 1M$ HFIL/sCASH LP to Unlock</Totalp>
            <Totalbutton>Stake LP to Unlock</Totalbutton>
          </StyledCardSuperAccent1>
        ) : (
            <></>
          )}







        {/* <StyledCardSuperAccent>
          <CardSection>
            {stat ? (
              <StyledValue>{(stat.priceInDAI !== '-' ? '$' : '') + stat.priceInDAI}</StyledValue>
            ) : (
                <ValueSkeleton />
              )}
            <Label text="Current Price" color={'#23223E'} />
          </CardSection>

          <CardSection>
            {stat ? <StyledValue>{commify(stat.totalSupply)}</StyledValue> : <ValueSkeleton />}
            <StyledSupplyLabel href={tokenUrl} target="_blank" color={'#23223E'}>
              {supplyLabel}
            </StyledSupplyLabel>
          </CardSection>
        </StyledCardSuperAccent> */}


      </StyledCards>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  @media (max-width: 768px) {
    margin-top: ${(props) => props.theme.spacing[4]}px;
    width: 250px;
  }
`;

const CardHeader = styled.span`
  font-size: 24px;
  font-family: FZPinShangHeiS-R-GB;
  color: #FFFFFF;
  margin-left: 12px;
`;

const Totalbutton = styled.button`
border: none;
width: 220px;
background: #FA4E32;
border-radius: 22px;
font-size: 16px;
font-family: Comfortaa;
color: #FFFFFF;
line-height: 38px;
`;

const Totalp = styled.p`
min-width: 250px;
text-align: center;
font-size: 13px;
font-family: FZPinShangHeiS-R-GB;
color: #7E7BAD;
`;

const StyledCards = styled.div`
  width: 200px;
  min-height: 315px;
  padding: ${(props) => props.theme.spacing[3]}px 30px;
  color: ${(props) => props.theme.color.white};
  background-color: rgba(48, 55, 78, 0.6);
  @media (max-width: 768px) {
    width: 85%;
  }
`;

const StyledValue = styled.span`
  display: inline-block;
  font-size: 30px;
  color: #eeeeee;
  margin-bottom: 10px;
`;

const CardSection = styled.div`
  margin-bottom: ${(props) => props.theme.spacing[4]}px;

  &:last-child {
    margin-bottom: 0;
  }
`;

const ValueSkeletonPadding = styled.div`
  padding-top: ${(props) => props.theme.spacing[3]}px;
  padding-bottom: ${(props) => props.theme.spacing[2]}px;
`;

const StyledSupplyLabel = styled.a`
  font-size: 16px;
  display: block;
  color: ${(props) => props.color};
`;

const ValueSkeleton = () => {
  const theme = useContext(ThemeContext);
  return (
    <SkeletonTheme color={'#fff'} highlightColor={theme.color.primary.main}>
      <ValueSkeletonPadding>
        <Skeleton height={10} />
      </ValueSkeletonPadding>
    </SkeletonTheme>
  );
};

const GuideText = styled.span`
  color: ${(props) => props.theme.color.primary.main};
  font-size: 0.8rem;
`;

const ValueText = styled.p`
  color: ${(props) => props.theme.color.white};
  font-weight: bold;
  font-size: 1.25rem;
  margin: ${(props) => props.theme.spacing[1]}px 0;
`;

export default HomeCard;
